/*
* @Author: Choisaaaa
* @Date: 2018/5/5  23:29
* React的生命周期
*/

/**
 * React生命周期节点
 * Mounting：挂载阶段
 * Updating：运行时阶段
 * Unmounting:卸载阶段
 * Error Handing:错误处理
 */

import React from  "react";
import ReactDOM from 'react-dom';

class Component extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name : "oldState"
        }
        console.log( "子组件构造函数：constructor 初始化数据：")
    }
    componentWillMount(){
        console.log("子组件将要挂载： componentWillMount")
    }
    componentDidMount(){
        console.log("子组件挂载完成：componentDidMount")
    }
    handleClick() {//处理点击事件
        this.setState({
            name : "newState"
        });
    }
    componentWillReceiveProps(){
        console.log("子将要接收父组件传来的props：componentWillReceiveProps")
    }
    shouldComponentUpdate(){//通过 返回值 来判断是否需要更新子组件 默认返回true
        console.log("判断子组件是够应该更新：shouldComponentUpdate")
        return true;
    }
    componentWillUpdate(){
        console.log("子组件将要更新：componentWillUpdate")
    }
    componentDidUpdate(){
        console.log("子组件更新完成：componentWillUpdate")
    }
    componentWillUnmount(){
        console.log("子组件将要销毁：componentWillUpdate")
    }
    render(){//渲染
        console.log("子组件执行render()方法")
        return(
            <div>
                <div>props : {this.props.data}</div>
                <button onClick={(e)=>{this.handleClick()}}>更新子组件</button>
            </div>
        );
    }
}
class App extends React.Component{
    constructor(props){
        super(props);
        console.log( "父组件构造函数：constructor 初始化数据：")
        this.state = {
            data : "old props",
            hasChild : true
        }
    }
    onPropsChange(){
        console.log("更新props");
        this.setState({
            date : "new props"
        });
    }
    onDestoryChild(){
        console.log("销毁子组件");
        this.setState({
            hasChild : false
        });
    }
    render(){
        console.log("父组件的构造函数 render")
        return(
            <div>
                {
                    this.state.hasChild  ?   <Component data={this.state.data} /> :null
                }
                <button onClick={(e)=>{this.onPropsChange()}}>改变props</button>
                <button onClick={(e)=>{this.onDestoryChild()}}>销毁子组件</button>
            </div>
        );

    }
}

ReactDOM.render(
    <div>
        <App/>
    </div>,
    document.getElementById("Study")
);